<template>
  <div class="main">
    <div class="container">
      按专业统计：
      <div id="majorEchart"></div>
    </div>
    <div class="container">
      按班级统计：
      <div id="classroomEchart"></div>
    </div>
    <div class="container">
      按岗位统计：
      <div id="jobEchart"></div>
    </div>
    <div class="container">
      按企业统计：
      <div id="companyEchart"></div>
    </div>
  </div>
</template>

<script>
import {
  reqMajorStatistic,
  reqClassroomStatistic,
  reqJobStatistic,
  reqCompanyStatistic,
} from '@/views/Custom/EmploymentStatistic/api/EmploymentStatic';
export default {
  name: 'EmploymentStatic',
  data() {
    return {
      majorData: [],
      classroomData: [],
      jobData: [],
      companyData: [],
    };
  },
  mounted() {
    //  获取专业统计数据
    this.statisticEmployNumByMajor();
  },
  methods: {
    async getMajorStatisticData() {
      return await reqMajorStatistic();
    },
    getClassroomStatisticData() {
      reqClassroomStatistic().then((res) => {
        this.classroomData = res.data.classroomStatistic;
      });
    },
    getJobStatisticData() {
      reqJobStatistic().then((res) => {
        this.jobData = res.data.jobStatistic;
      });
    },
    getCompanyStatisticData() {
      reqCompanyStatistic().then((res) => {
        this.companyData = res.data.companyStatistic;
      });
    },

    getEcharts(domObj, nameArr, numberArr) {
      var myChart = this.$echarts.init(domObj);
      var dataZoomEnd = nameArr.length > 25 ? 30 : 100;
      var option = {
        xAxis: {
          nameLocation: 'middle',
          type: 'category',
          data: nameArr,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: numberArr,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var relval = params[0].name;
            for (var i = 0; i < params.length; i++) {
              relval += ':' + params[i].value + ' 人';
            }
            return relval;
          },
        },
        dataZoom: [
          {
            type: 'slider',
            show: dataZoomEnd == 100 ? false : true,
            realtime: true,
            start: 0,
            end: dataZoomEnd,
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: dataZoomEnd,
          },
        ],
      };
      myChart.setOption(option);
    },

    statisticEmployNumByMajor() {
      // 获取专业统计数据
      this.getMajorStatisticData().then((res) => {
        this.majorData = res.data.majorStatistic;
        let nameArr = this.majorData.map((item) => item.name);
        let numberArr = this.majorData.map((item) => item.employNumber);
        let domObj = document.getElementById('majorEchart');
        this.getEcharts(domObj, nameArr, numberArr);
      });
      // 获取班级统计数据
      reqClassroomStatistic().then((res) => {
        this.classroomData = res.data.classroomStatistic;
        let nameArr = this.classroomData.map((item) => item.name);
        let numberArr = this.classroomData.map((item) => item.employNumber);
        let domObj = document.getElementById('classroomEchart');
        this.getEcharts(domObj, nameArr, numberArr);
      });
      // 获取岗位统计数据
      reqJobStatistic().then((res) => {
        this.jobData = res.data.jobStatistic;
        let nameArr = this.jobData.map((item) => item.name);
        let numberArr = this.jobData.map((item) => item.employNumber);
        let domObj = document.getElementById('jobEchart');
        this.getEcharts(domObj, nameArr, numberArr);
      });
      // 获取企业统计数据
      reqCompanyStatistic().then((res) => {
        this.companyData = res.data.companyStatistic;
        let nameArr = this.companyData.map((item) => item.name);
        let numberArr = this.companyData.map((item) => item.employNumber);
        let domObj = document.getElementById('companyEchart');
        this.getEcharts(domObj, nameArr, numberArr);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin-top: 20px;
  text-align: center;
  & .container {
    margin-top: 40px;
    width: 100%;
    height: 300px;
    margin-left: 30px;
    color: #606266;
    font-size: 24px;
  }
  #majorEchart {
    width: 100%;
    height: 100%;
  }
  #classroomEchart {
    width: 100%;
    height: 100%;
  }
  #jobEchart {
    width: 100%;
    height: 100%;
  }
  #companyEchart {
    width: 100%;
    height: 100%;
  }
}
</style>
